<template>
  <div class="content_home">
    <div class="content_home_start">
      <p style="margin: 0; height: 30px; line-height: 30px">基础表格</p>
      <div class="conter_table">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-button
              type="primary"
              size="small"
              style="width: 100%"
              @click="moreDel"
            >
              <i class="el-icon-delete-solid"></i> 批量删除</el-button
            >
          </el-col>
          <el-col :span="4"> </el-col>
          <el-col :span="6">
            <el-input
              style="width: 100%"
              size="small"
              v-model="input"
              placeholder="筛选姓名"
              @input="select"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" style="width: 100%">
              <i class="el-icon-delete-solid"></i> 搜索</el-button
            >
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px"
          :header-cell-style="headClass"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="50"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="userName"
            label="姓名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column label="风景区域" width="120" align="center">
            <template slot-scope="scope">
              <el-select
                style="width: 100%"
                size="small"
                v-model="scope.row.value"
                placeholder="区域"
              >
                <el-option
                  v-for="item in scope.row.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="url"
            label="点击(看大图)"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.url"
                  :fit="fill"
                  :preview-src-list="scope.row.srcList"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="cash" label="现金" align="center">
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag size="mini" type="primary" v-if="scope.row.status"
                >成功</el-tag
              >
              <el-tag size="mini" type="danger" v-else>失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="时间" align="center" width="120">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <span
                @click="emit(scope.$index, scope.row)"
                style="color: blue; font-size: 13px; cursor: pointer"
                ><i class="el-icon-edit"></i>编辑</span
              >
              <span
                @click="delect(scope.$index, scope.row)"
                style="
                  color: red;
                  font-size: 13px;
                  margin-left: 5px;
                  cursor: pointer;
                "
                ><i class="el-icon-delete-solid"></i>删除</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div
          style="
            height: 100px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="this.tableData.length"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 此处为编辑处弹框 -->
      <el-dialog
        title="修改信息"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          :model="form"
          style="padding: 0 50px; box-sizing: border-box"
        >
          <el-form-item label="姓名:">
            <el-input v-model="form.userName" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="现金">
            <el-input v-model="form.cash" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="form.time" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address" style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" right>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="fine">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      fill: "fill",
      dialogVisible: false,
      form: {},
      index: 0,
      //   分页
      pageSize: 5,
      currentPage: 1,
      selectTable: [],
      newTable: [],
      tableData: [
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 1,
          userName: "张三",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 2,
          userName: "张S",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: false,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 3,
          userName: "张W",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: false,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 4,
          userName: "张Z",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 5,
          userName: "王1",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 6,
          userName: "王2",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 7,
          userName: "王3",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 8,
          userName: "王4",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 9,
          userName: "李1",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
        {
          isShow: false,
          options: [
            {
              value: "上海",
              label: "东方明珠",
            },
            {
              value: "北京",
              label: "故宫",
            },
            {
              value: "正阳县",
              label: "袁寨乡",
            },
          ],
          value: "",
          id: 10,
          userName: "李2",
          cash: "29元",
          address: "河南驻马店正阳县",
          status: true,
          time: "2020-10-21",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          ],
        },
      ],
    };
  },
  mounted() {
    this.selectTable = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    headClass() {
      // 表格table头第一行的背景
      return "text-align: center;background:#eef1f6;";
    },
    handleClose(done) {
      // 弹框关闭向下走
      done();
    },
    emit(indexs, data) {
      // 点击编辑传数据展示弹框中
      console.log(indexs);
      this.index = indexs;
      this.form = data;
      this.dialogVisible = true;
    },
    fine() {
      // 弹框编辑成功确认按钮
      this.$set(this.tableData, this.index, this.form);
      this.dialogVisible = false;
      this.$message({
        type: "success",
        message: `第${this.index + 1}行编辑成功`,
      });
    },
    delect(index) {
      //  table 表格删除提示
      this.$confirm("此操作永久删除哦", "提示", {
        // confirmButtonText: "确定",
        // cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          console.log("www");
        });
    },
    handleSelectionChange(data) {
      this.newTable = data;
    },
    moreDel() {
      // 批量删除事件
      for (var i = 0; i < this.tableData.length; i++) {
        for (var j = 0; j < this.newTable.length; j++) {
          if (this.tableData[i].id === this.newTable[j].id) {
            this.tableData.splice(i, 1);
          }
        }
      }
      this.newTable = [];
    },
    select() {
      let arr = [];
      for (var i = 0; i < this.selectTable.length; i++) {
        if (this.selectTable[i].userName.indexOf(this.input) != -1) {
          arr.push(this.selectTable[i]);
        }
      }
      console.log(arr);
      this.tableData = arr;
    },
  },
};
</script>

<style .scoped>
.content_home_start {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.conter_table {
  margin-top: 10px;
  /* height: 600px; */
  padding: 35px 15px;
  border-radius: 5px;
  border: 1px solid gray;
  box-sizing: border-box;
}
</style>